<template>
<h2>组件demo10-component01.vue</h2>

  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">注册组件</div>
    <div  class="zhtt-demo-card-body">
      <my-component></my-component>
      <my-component2 title="这个可以向自定义组件中传值"></my-component2>
    </div>
    <div class="zhtt-demo-card-footer"></div>
  </div>

  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">子组件调用父组件方法</div>
    <div  class="zhtt-demo-card-body">
      <my-component3
          title="事件"
          @enlargeText="testFn"
      ></my-component3>
    </div>
    <div class="zhtt-demo-card-footer"></div>
  </div>
</template>

<script>
export default {
  name: "demo10-component",
  methods:{
    testFn(){
      alert('testFn');
    }
  }
}
</script>

<style scoped>

</style>